<template>
	<el-form label-width="110px" :model="form" :rules="rules" ref="queryForm">
		<el-row>
			<el-col :span="12">
				<el-form-item label="行政区域" prop="district">
					<el-select v-model="form.district" size="default" placeholder="请选择" style="width: 190px" clearable
						filterable>
						<el-option v-for="item in options" :key="item.dictValue" :label="item.dictLabel"
							:value="item.dictValue" />
					</el-select>
				</el-form-item>
				<el-form-item label="常住人口数量" prop="ofenPeopleSum">
					<el-input v-model="form.ofenPeopleSum" style="width: 190px;"
					@input="e => regOnlyNumSpot(e, form, 'ofenPeopleSum', 0)"></el-input>
				</el-form-item>
				<el-form-item label="城镇人口数量" prop="cityPeopleSum">
					<el-input v-model="form.cityPeopleSum" style="width: 190px;"
					@input="e => regOnlyNumSpot(e, form, 'cityPeopleSum', 0)"></el-input>
				</el-form-item>
				<el-form-item label="非城镇人口数量" prop="flowPeopleSum">
					<el-input v-model="form.flowPeopleSum" style="width: 190px;"
					@input="e => regOnlyNumSpot(e, form, 'flowPeopleSum', 0)"></el-input>
				</el-form-item>
				<el-form-item label="家庭人口数量" prop="familyPeople">
					<el-input v-model="form.familyPeople" style="width: 190px;"
					@input="e => regOnlyNumSpot(e, form, 'familyPeople', 0)"></el-input>
				</el-form-item>
				<el-form-item label="集体户口情况" prop="collectiveHk">
					<el-input v-model="form.collectiveHk" style="width: 190px;"
					@input="e => regOnlyNumSpot(e, form, 'collectiveHk', 0)"></el-input>
				</el-form-item>
				<el-form-item label="60岁以上" prop="sixty">
					<el-input v-model="form.sixty" style="width: 190px;"
					@input="e => regOnlyNumSpot(e, form, 'sixty', 0)"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">

				<el-form-item label="受教育情况" prop="education">
					<el-input v-model="form.education" style="width: 190px;"
					@input="e => regOnlyNumSpot(e, form, 'education', 0)"></el-input>
				</el-form-item>

				<el-form-item label="男性占比" prop="manProportion">
					<el-input v-model="form.manProportion" style="width: 190px;"
					@input="e => regOnlyNumSpot(e, form, 'manProportion', 2)"></el-input>
				</el-form-item>

				<el-form-item label="女性占比" prop="womanProportion">
					<el-input v-model="form.womanProportion" style="width: 190px;"
					@input="e => regOnlyNumSpot(e, form, 'womanProportion', 2)"></el-input>
				</el-form-item>

				<el-form-item label="0-14岁" prop="zeroFourteen">
					<el-input v-model="form.zeroFourteen" style="width: 190px;"
					@input="e => regOnlyNumSpot(e, form, 'zeroFourteen', 0)"></el-input>
				</el-form-item>

				<el-form-item label="15-59岁" prop="fifteenFiftynine">
					<el-input v-model="form.fifteenFiftynine" style="width: 190px;"
					@input="e => regOnlyNumSpot(e, form, 'fifteenFiftynine', 0)"></el-input>
				</el-form-item>

				<el-form-item label="65岁以上" prop="sixtyFive">
					<el-input v-model="form.sixtyFive" style="width: 190px;"
					@input="e => regOnlyNumSpot(e, form, 'sixtyFive', 0)"></el-input>
				</el-form-item>

			</el-col>
		</el-row>
		<div style="display: flex;justify-content: flex-end;">
			<el-button @click="closethis()" @keyup.prevent @keydown.enter.prevent>取消</el-button>
			<el-button type="primary" @click="submit(queryForm)" @keyup.prevent @keydown.enter.prevent>确定</el-button>
		</div>
	</el-form>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'

	import {
		commonInterface
	} from '@/api/common/common'
	
	import {
		regOnlyNumSpot
	} from '@/utils/reg'



	const emit = defineEmits(['getList', 'closeWindow'])
	const props = defineProps(['editData', 'options'])

	const form = ref({})

	const queryForm = ref('')

	const options = ref()

	//必填项
	const rules = reactive({

	})
	//取消
	const closethis = () => {
		emit('closeWindow')
	}

	//确定
	const submit = async (e) => {
		if (!e) return
		await e.validate((valid) => {
			if (valid) {
				let method = 'post'
				if (props.editData) method = 'put'
				commonInterface('/back/renfang/csrk/distribution/', form.value, method).then(result => {
					if (result.code === 200) {
						ElMessage.success(result.msg)
						emit('closeWindow')
						emit('getList')
					} else {
						ElMessage.error(result.msg)
					}
				})
			}
		})
	}

	onMounted(() => {
		options.value = props.options
		if (props.editData) form.value = props.editData
	})
</script>

<style>
</style>